<template>
  <a-tooltip placement="top">
    <template #title>
      <span>上一个</span>
    </template>
    <a-float-button
      :type="plantDetail?.front ? 'primary' : 'default'"
      :style="{
        top: '218px',
        right: '180px'
      }"
      @click="prev"
    >
      <template #icon>
        <ArrowLeftOutlined />
      </template>
    </a-float-button>
  </a-tooltip>
  <a-tooltip placement="top">
    <template #title>
      <span>下一个</span>
    </template>
    <a-float-button
      :type="plantDetail?.after ? 'primary' : 'default'"
      :style="{
        top: '218px',
        right: '120px'
      }"
      @click="next"
    >
      <template #icon>
        <ArrowRightOutlined />
      </template>
    </a-float-button>
  </a-tooltip>

  <a-tabs v-model:activeKey="activeKey" class="plant-detail">
    <a-tab-pane key="1" tab="信息">
      <div class="basic-info">
        <a-descriptions
          style="margin-top: 24px"
          v-if="plantDetail"
          :title="plantDetail?.chinese_name"
          :contentStyle="{ width: '650px' }"
          :labelStyle="{ minWidth: '160px' }"
          bordered
          :column="2"
        >
          <a-descriptions-item label="编号">{{ plantDetail?.number }}</a-descriptions-item>
          <a-descriptions-item label="植物名">{{ plantDetail?.chinese_name }}</a-descriptions-item>
          <a-descriptions-item v-if="['school', 'jinfo'].includes(pageType)" label="分布位置">{{
            plantDetail?.geographical
          }}</a-descriptions-item>
          <a-descriptions-item label="别名">{{ plantDetail?.alias }}</a-descriptions-item>
          <a-descriptions-item label="药材名">{{
            plantDetail?.medicinal_name
          }}</a-descriptions-item>
          <a-descriptions-item label="拉丁学名">{{ plantDetail?.latin_name }}</a-descriptions-item>
          <a-descriptions-item label="应用部位">{{
            plantDetail?.medicinal_parts
          }}</a-descriptions-item>
          <!-- <a-descriptions-item label="军事应用">{{ plantDetail?.types_of_military_applications }}</a-descriptions-item> -->
        </a-descriptions>
        <a-collapse
          v-model:activeKey="collapseActive"
          :bordered="false"
          style="margin-top: 24px; background-color: #fff"
        >
          <template #expandIcon="{ isActive }">
            <CaretRightOutlined :rotate="isActive ? 90 : 0" />
          </template>
          <a-collapse-panel
            v-for="(item, index) in collapseShowData"
            :key="index"
            :header="item.title"
            :style="customStyle"
          >
            <template v-if="item.type && item.type === 'picture'">
              <a-space wrap>
                <a-image
                  v-for="item in plantDetail?.hand_painted_url"
                  :key="item"
                  :width="200"
                  :src="item"
                />
              </a-space>
            </template>
            <template v-else>
              <div class="show-line" v-html="plantDetail && plantDetail[item.key]"></div>
            </template>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </a-tab-pane>
    <a-tab-pane key="2" tab="图片">
      <a-card title="手绘图">
        <a-space wrap>
          <a-image
            v-for="item in plantDetail?.hand_painted_url"
            :key="item"
            :width="100"
            :src="item"
          />
        </a-space>
      </a-card>
      <div class="preview-line">
        <a-card title="生境">
          <a-space wrap>
            <a-image v-for="item in plantDetail?.living_url" :key="item" :width="100" :src="item" />
          </a-space>
        </a-card>
        <a-card title="全株">
          <a-space wrap>
            <a-image
              v-for="item in plantDetail?.whole_plant_url"
              :key="item"
              :width="100"
              :src="item"
            />
          </a-space>
        </a-card>
      </div>
      <div class="preview-line">
        <a-card title="根">
          <a-space wrap>
            <a-image v-for="item in plantDetail?.root_url" :key="item" :width="100" :src="item" />
          </a-space>
        </a-card>
        <a-card title="茎">
          <a-space wrap>
            <a-image v-for="item in plantDetail?.stem_url" :key="item" :width="100" :src="item" />
          </a-space>
        </a-card>
      </div>
      <div class="preview-line">
        <a-card title="叶">
          <a-space wrap>
            <a-image v-for="item in plantDetail?.leaf_url" :key="item" :width="100" :src="item" />
          </a-space>
        </a-card>
        <a-card title="花">
          <a-space wrap>
            <a-image v-for="item in plantDetail?.flower_url" :key="item" :width="100" :src="item" />
          </a-space>
        </a-card>
      </div>
      <div class="preview-line">
        <a-card title="果实">
          <a-space wrap>
            <a-image v-for="item in plantDetail?.fruit_url" :key="item" :width="100" :src="item" />
          </a-space>
        </a-card>
        <a-card title="种子">
          <a-space wrap>
            <a-image v-for="item in plantDetail?.seed_url" :key="item" :width="100" :src="item" />
          </a-space>
        </a-card>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { fetchPlantDetail } from '@/api/plant'
import { CaretRightOutlined, ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue';

const route = useRoute()
const router = useRouter()
const pageType = ref<string>('')
const loading = ref(false)

onMounted(() => {
  onload()
})

const onload = (paramsId?: number) => {
  
  const id = paramsId ?? route.query.id
  if (id) getPlantMedicinalDetail(Number(id))
  pageType.value = route.query.type as string
}

const plantDetail = ref<any>()
const getPlantMedicinalDetail = async (id: number) => {
  loading.value = true
  const res = await fetchPlantDetail(id)
  plantDetail.value = res.data.data
  const imgKey = [
    'hand_painted_url',
    'living_url',
    'whole_plant_url',
    'root_url',
    'stem_url',
    'leaf_url',
    'flower_url',
    'fruit_url',
    'seed_url'
  ]
  Object.keys(plantDetail.value).forEach((key) => {
    if (imgKey.includes(key)) {
      plantDetail.value[key] = plantDetail.value[key] ? plantDetail.value[key].split(',') : []
    }
  })
  loading.value = false
}
const activeKey = ref('1')

const collapseShowData = [
  {
    key: 'describe_info',
    title: '植物形态'
  },
  {
    key: 'picture',
    title: '图片',
    type: 'picture'
  },
  {
    key: 'flowering_and_fruiting',
    title: '花期和果期'
  },
  {
    key: 'living_environment',
    title: '生境'
  },
  // {
  //   key: 'geographical',
  //   title: '地理分布'
  // },
  {
    key: 'effect',
    title: '功效'
  },
  {
    key: 'indication_usage',
    title: '适应症/用法'
  },
  {
    key: 'other',
    title: '其他'
  }
]
const collapseActive = ref(collapseShowData.map((item, index) => index))
const customStyle =
  'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden'

// 上一个和下一个
const next = () => {
  if (loading.value) {
    message.destroy()
    message.error('请勿频繁操作')
    return
  }
  const id = plantDetail.value.after
  if (id) {
    const path = '/plant/detail'
    const query = { ...route.query, id }
    router.replace({
      path,
      query
    })
    onload(id)
  } else {
    message.destroy()
    message.info('当前已是最后一条')
  }
}
const prev = () => {
  if (loading.value) {
    message.destroy()
    message.error('请勿频繁操作')
    return
  }
  const id = plantDetail.value.front
  if (id) {
    const path = '/plant/detail'
    const query = { ...route.query, id }
    router.replace({
      path,
      query
    })
    onload(id)
  } else {
    message.destroy()
    message.info('当前已是第一条')
  }
}
</script>

<style scoped lang="scss">
.plant-detail {
  background-color: #fff;
}
.basic-info {
  padding: 0 16px;
  :deep(.ant-descriptions-title) {
    font-weight: bold;
    font-size: 28px;
    color: #1677ff;
  }
}

.show-line {
  white-space: pre-wrap;
  line-height: 28px;
  font-size: 14px;
}

.preview-line {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;

  :deep(.ant-card) {
    width: calc(50% - 8px);
  }
}
</style>
